<template>
	<view>
		<view class="course">
			<view v-if="type!=='records'" class="items">
				<view class="item" v-for="(item,index) in courseList" :key="index" @click="goDetail(item)">
					<view class="left">
						<u-image :src="item.image" width="260" height="195" radius="10"></u-image>
					</view>
					<view class="right">
						<view class="t-name">{{item.name}}</view>
						
						<text class="t-mn">{{item.major_name}}</text>
						<view class="t-fbsj">
							<text class="sj">{{item.publishtime_text}}</text>
							<text class="view">{{item.view}}人观看</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="items">
				<view class="item" v-for="(item,index) in courseList" :key="index" @click="goDetail(item)">
					<view class="left">
						<u-image :src="item.image" width="200" height="150" radius="10"></u-image>
					</view>
					<view class="right">
						<view class="u-flex u-row-between t-name">
							<text class="u-title">{{item.name}}</text>
							<text v-if="item.watched=='yes'" class="u-m-l-10 df-btn sted">已学习</text>
							<text v-if="item.watched=='no' && item.progress>0" class="u-m-l-10 df-btn sting">正在学习</text>
							<text v-if="item.progress==0 && item.watched=='no'" class="u-m-l-10 df-btn ">未学习</text>
						</view>
						<view class="t-fbsj">
							<text class="sj">{{item.publishtime_text}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"fa-course-item",
		props: {
			courseList: {
				type: Array,
				default: []
			},
			type: {
				type: String,
				default: ''
			}
		},
		data() {
			return {};
		},
		methods: {
			goDetail(item) {
				let page = '/pages/course/detail';
				this.goPage(page + '?course_id=' + item.id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.course{
		
		.items{
			.item{
				display: flex;
				// align-items: center;
				background-color: #ffffff;
				border-radius: 10rpx;
				padding: 24rpx 18rpx;
				margin-bottom: 24rpx;
				.right{
					width: 100%;
					padding-left: 24rpx;
					.t-name{
						font-size: 30rpx;
						color: #333333;
						margin-bottom: 16rpx;
						.df-btn{
							padding: 6rpx 12rpx;
							font-size: 24rpx;
							background-color: #DBE0E8;
							border-radius: 4rpx;
						}
						.sted{
							background-color: #CBF1D8;
							color: #47A467;
						}
						.sting{
							background-color: #FFE9DA;
							color: #FF6905;
						}
						.u-title{
							width: 283rpx;
						}
					}
					.t-mn{
						// display: block;
						background-color: #F1F2F5;
						border-radius: 10rpx;
						padding: 8rpx 12rpx;
						font-size: 24rpx;
						color: #999999;
						// margin: 16rpx 0rpx 28rpx 0rpx;
					}
					.t-fbsj{
						margin-top: 28rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.sj{
							font-size: 24rpx;
							color:#999999;
						}
						.view{
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
			}
		}
	}
</style>